<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<HeadNav titleName="群聊" :topheight="navBarHeight"></HeadNav>

		<view class="main">
			<view class="main-ctr">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view v-for="(group,index) in survGroupsList" class="group-item" @click="showChatBox(group)">
						<image :src="group.headImage"></image>
						<text>{{ group.name }}</text>
					</view>
				</scroll-view>



			</view>
		</view>
	</view>
</template>

<script>
	import http from '@/common/request';
	import HeadNav from "@/components/HeadNav"
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				survGroupsList: []
			}
		},
		components: {
			HeadNav
		},
		mixins: [navBarMixin],
		methods: {
			showChatBox(group) {
				// console.log('index===',index)
				let chat = {
					type: 'GROUP',
					targetId: group.id,
					showName: group.remark,
					headImage: group.headImage,
				};

				this.$store.commit("openChat", chat);

				uni.navigateTo({
					url: "/pages/chat/chat-box?chatIdx=0"
				})
			},
			survGroups() { // 筛选过滤群 数组
				http({
					url: '/group/list',
					method: 'GET'
				}).then((groups) => {
					this.survGroupsList = groups.filter(item => {
						return !item.quit
					})

					// console.log('survGroupsList===xxxxx', this.survGroupsList)
				})

			}
		},
		onLoad() {
			this.survGroups()
		}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;

		.main {
			height: calc(100vh - 78px);
			padding: 0 30rpx;
			padding-bottom: 30rpx;
			padding-top: 30rpx;
			box-sizing: border-box;

			.main-ctr {
				height: 100%;
				padding: 0 30rpx;
				border-radius: 10rpx;
				background: #fff;

				.scroll-Y {
					height: 100%;
					overflow: auto;

					.group-item {
						display: flex;
						align-items: center;
						height: 120rpx;
						border-bottom: 2rpx solid #eee;

						image {
							width: 60rpx;
							height: 60rpx;
						}

						text {
							flex: 1;
							text-overflow: ellipsis;
							overflow: hidden;
							word-break: break-all;
							white-space: nowrap;
							margin-left: 20rpx;
							color: #333;
							font-size: 32rpx;
						}

						// image {
						// 	width: 60rpx;
						// 	height: 60rpx;
						// }
					}
				}


			}
		}
	}
</style>